<template>
  <div class="order_list">
    <title-bar :title="'售后工单'"/>
    <van-tabs
      sticky
      :active="activeIndex"
      :swipe-threshold="5"
      @click="handleTabClick"
      style="margin-top: 46px;"
      :offset-top="46"
    >
      <van-tab v-for="tab in tabsItem" :title="tab.name" :key="tab.status">
        <form action="/">
          <van-search
            v-model="searchValue"
            placeholder="请输入收货人、电话或订单号搜索"
            show-action
            @search="onSearch"
            background="#00CC66"
          >
            <div slot="action" @click="onSearch">搜索</div>
          </van-search>
        </form>
        <van-list
          v-model="loading"
          :finished="finished"
          :immediate-check="false"
          :offset="100"
          @load="loadMore"
        >
          <van-panel
            v-for="(el, i) in items"
            class="order_list--panel"
            :key="i"
            :title="el.ordersn"
            :status="getStatusText(el.status)"
          >
            <div>
              <van-card
                class="order_list--van-card"
                :key="el.id"
                :title="el.shortTitle"
                :desc="el.specTitle"
                :num="el.total"
                :price="el.marketprice.toFixed(2)"
                :thumb="el.thumb | image"
              >
                <div slot="tags" class="van-card__desc">
                  <div v-if="el.optionname">商品规格：{{el.optionname}}</div>
                </div>
                <!-- <div slot="footer" v-if="goodsStatus(el) == 1">
									<van-button size="mini" type="warning" plain @click="addWorkOrder(el)">申请售后</van-button>
                </div>-->
                <div slot="footer" v-if="goodsStatus(el) == 1">
                  <!-- <van-button size="mini" type="warning" plain @click="workOrder(el)">售后进度</van-button> -->
                  <van-button size="mini" type="warning" plain @click="cancelWorkOrder(el)">撤销售后</van-button>
                </div>
                <!-- <div slot="footer" v-else-if="el.workId">
									<van-button size="mini" type="warning" plain @click="workOrder(el)">售后详情</van-button>
                </div>-->
              </van-card>
              <div class="order_list--sender">
                <div class="float-l">
                  <span>{{el.sname}}</span>
                  <span
                    style="margin-left: 5px;color:#1989FA;"
                    @click="phoneCall(el.mobile)"
                  >{{el.mobile}}</span>
                </div>
                <div>{{el.createTime | dateTimeFormat('YYYY-MM-DD HH:mm')}}</div>
              </div>
            </div>
            <div slot="footer" class="order_list--footer_btn">
              <div class="float-l yuan">
                合计:
                <span style="color: #ff0053;">{{el.money | yuan(false)}}</span>
              </div>
              <van-button size="small" @click="workOrder(el)" type="danger">查看详情</van-button>
            </div>
          </van-panel>
        </van-list>
        <is-empty v-if="isEmpty">抱歉,没有找到符合条件的工单</is-empty>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { WORK_LIST } from "@/api/order";
import { WORKORDER_CANCEL } from "@/api/user";
import { Tab, Tabs, Panel, Card, Search } from "vant";
import IsEmpty from "@/vue/components/is-empty/";
import loadMore from "@/vue/mixin/list-load-more";
import scrollFixed from "@/vue/mixin/scroll-fixed";
import TitleBar from "@/vue/components/title-bar/";

const STATUS_TEXT = {
  "-1": "已关闭",
  0: "已申请",
  1: "财务处理",
  2: "已完成",
  3: "仓库处理"
};

export default {
  name: "shop-work-list",
  mixins: [loadMore, scrollFixed],
  props: {
    teamId: [String, Number]
  },

  data() {
    return {
      activeIndex: 0,
      items: [],
      tabsItem: [
        {
          name: "全部"
        },
        {
          name: "已关闭",
          status: -1
        },
        {
          name: "已申请",
          status: 0
        },
        {
          name: "仓库处理",
          status: 3
        },
        {
          name: "财务处理",
          status: 1
        },
        {
          name: "已完成",
          status: 2
        }
      ],
      searchValue: ""
    };
  },
  watch: {
    $route: "resetInit"
  },

  created() {
    this.resetInit();
  },

  methods: {
    initData() {
      const i = this.activeIndex;
      const status = this.tabsItem[i].status;
      return this.$reqGet(
        WORK_LIST,
        {
          limit: this.pages.perPage,
          offset: (this.pages.currPage - 1) * this.pages.perPage,
          mId: this.teamId,
          status: status,
          queryItem: this.searchValue
        },
        {
          hideLoading: true
        }
      ).then(res => {
        const { rows, total } = res.data.data;
        this.items.push(...rows);
        return {
          pageCount: rows.length,
          totalCount: total
        };
      });
    },
    handleTabClick(index) {
      this.activeIndex = index;
      this.resetInit();
    },
    getStatusText(status) {
      return STATUS_TEXT[status] || "";
    },
    /* toOrderDetail(i) {
	      const orderId = this.items[i].id;
	      this.$router.push({
	        name: "payment",
	        params: {
	          payId: orderId
	        }
	      })
	    }, */

    onSearch() {
      this.resetInit();
    },

    /* 	addWorkOrder(goods) {
				this.$router.push({
					name: "add-work-order",
					query: {
						orderId: goods.orderid,
						goodsId: goods.id,
						goodsPrice: goods.marketprice,
						goodsNum: goods.total
					}
				});
			}, */
    cancelWorkOrder(goods) {
      this.$dialog
        .confirm({
          message: "是否确认撤销售后申请",
          cancelButtonText: "取消"
        })
        .then(() => {
          this.$reqPost(WORKORDER_CANCEL, { id: goods.id }).then(res => {
            if (res.data.data === 1) {
              this.$toast.success("工单撤销成功");
              this.resetInit();
            }
          });
        });
    },
    workOrder(goods) {
      this.$router.push({ name: "work-order", params: { workId: goods.id } });
    },
    //检查商品售后状态
    goodsStatus(goods) {
      if (this.teamId != this.user.id) {
        return 0;
      }

      if (goods.status == 0) {
        return 1;
      }

      /* if (goods.status == 5) {
					return 2;
				} */
    },

    phoneCall(phone) {
      window.location.href = "tel:" + phone;
    }
  },
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Panel.name]: Panel,
    [Card.name]: Card,
    [IsEmpty.name]: IsEmpty,
    [Search.name]: Search,
    [TitleBar.name]: TitleBar
  }
};
</script>

<style lang="scss" scoped>
.order_list {
  // padding-bottom: 60px;
  &--footer_btn {
    text-align: right;
    line-height: 30px;
  }
  &--panel {
    margin-bottom: 10px;
  }

  &--van-card {
    background-color: #fafafa;
  }

  &--sender {
    text-align: right;
    padding: 10px 15px;
  }
}

.yuan {
  font-size: 16px;

  ::before {
    content: "¥";
    margin-right: 3px;
    font-size: 8px;
  }
}
</style>
